<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <!--v-if 从dom中直接将元素移除，所以如果一个元素需要频繁切换显示状态应该是好用v-show-->
    <!--v-show 通过display属性控制元素是否显示，始终会渲染到dom中，所以如果一个元素基本不会被显示，使用v-if-->
    <!--v-if 消耗文档操作性能，v-show 初始页面消耗渲染性能-->
    <p v-if="flag">hello</p>
    <p v-show="flag">hello</p>
    <input type="button" value="toggle" @click="flag=!flag">
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
        }
    })
</script>
</body>
</html>
